<html>

<head>
    <meta charset="UTF-8">
    <title>shout-box</title>


    <link rel="stylesheet" href="chat.css">
    <link rel="stylesheet" href="animate.css">

</head>

<body>
    <div class="wrapper">
        <div class="container">

            <div class="right">


                <div class="chat active-chat" data-chat="person2">
                    <div class="new">
                        <div class="empty">
                        <img src="../../image/窗口.png"><br><br>
                        选择联系人开始对话</div>
                    
                        </div>
                </div>
            </div>





        </div>
    </div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="../qwebchannel.js"></script>
    <script type="text/javascript">
    var g_context;
    window.onload=function(){
    new QWebChannel(qt.webChannelTransport, function(channel) {
    g_context= channel.objects.content;
    }); 
}
        var h = $(document).height();
        $(document).scrollTop(h);

        function withDraw(mid){
            g_context.withDraw(mid);
        }

        function changeBackground(u){
            $("<style></style>").text("body{background-image: url(\""+u+"\")!important;background-repeat:no-repeat; background-attachment:fixed}").appendTo($("head"));
        }

        function changeBackColor(c){
            $("<style></style>").text("body{background-color: "+c+"!important}").appendTo($("head"));
        }

        function changeStyle(selfback,selftext,youback,youtext){
            $("<style></style>").text(".bubble.me{background-color:"+selfback+"!important;color:"+selftext+"!important}.container .right .bubble.me:before{background-color:"+selfback+"!important}.bubble.you{background-color:"+youback+"!important;color:"+youtext+"!important}.container .right .bubble.you:before{background-color:"+youback+"!important}").appendTo($("head"));
        }

        function withDrawMsg(mid,self="yes"){
            if(self=="yes"){
                msg="您撤回了一条消息";
            }else{
                msg="对方撤回了一条消息";
            }
            $("#"+mid).html("<div class='withDraw'>"+msg+"</div>");
        }

        function garb(mid){
            g_context.Garb(mid);
        }

        function playSpeak(fname,mid){
            g_context.playSpeak(fname);
            $("#speak"+mid).removeClass("animated pulse");
            $("#speak"+mid).addClass("animated pulse");
        }

        function addSpeak(sec,filename,avatar,mid){
            $(".empty").remove();
            $(".active-chat").append("<div class=\"line animated fadeInLeft fast\"><div class=\"avatar\" style=\"float: left;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"rowl\" id='speak"+mid+"'><div class=\"bubble you bb speak\"  onclick='playSpeak(\""+filename+"\",\""+mid+"\")'><img src='../../image/语音w.png' class='dou'>   "+sec+"'</div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addSelfSpeak(sec,filename,avatar,mid){
            $(".empty").remove();
            $(".active-chat").append("<div class=\"line animated fadeInRight fast\"><div class=\"avatar\" style=\"float: right;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"row\" id='speak"+mid+"'><div class=\"bubble me bb speak\"  onclick='playSpeak(\""+filename+"\",\""+mid+"\")'><img src='../../image/语音.png' class='dou'>   "+sec+"'</div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addSelfRedPack(avatar,mid){
            $(".empty").remove();
			$(".active-chat").append("<div class=\"line animated fadeInRight fast\" id='"+mid+"'><div class=\"avatar\" style=\"float: right;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"row\"><div class=\"red bb\" onclick='garb(\""+mid+"\")'></div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addRedPack(avatar,mid){
            $(".empty").remove();
			$(".active-chat").append("<div class=\"line animated fadeInLeft fast\" id='"+mid+"'><div class=\"avatar\" style=\"float: left;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"rowl\"><div class=\"red bb\" onclick='garb(\""+mid+"\")'></div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addTextMsg(content,avatar,mid) {
        	$(".empty").remove();
            $(".active-chat").append("<div class=\"line animated fadeInLeft fast\" id='"+mid+"'><div class=\"avatar\" style=\"float: left;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"rowl\"><div class=\"bubble you bb\">"+content+"</div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addSelfDou(avatar){
            $(".empty").remove();
            $(".active-chat").append("<div class=\"line animated fadeInRight fast\"><div class=\"avatar\" style=\"float: right;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"row\"><div class=\"bubble me bb\"><img src='../../image/抖动1.png' class='dou'>   抖动窗口</div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addDou(avatar){
            $(".empty").remove();
            $(".active-chat").append("<div class=\"line animated fadeInLeft fast\"><div class=\"avatar\" style=\"float: left;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"rowl\"><div class=\"bubble you bb\"><img src='../../image/do.png' class='dou'>   抖动窗口</div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addSelfTextMsg(content,avatar,mid) {
        	$(".empty").remove();
			$(".active-chat").append("<div class=\"line animated fadeInRight fast\" oncontextmenu=\"withDraw('"+mid+"')\" id='"+mid+"'><div class=\"avatar\" style=\"float: right;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"row\"><div class=\"bubble me bb\">"+content+"</div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addImgMsg(content,avatar,mid) {
        	$(".empty").remove();
            $(".active-chat").append("<div class=\"line animated fadeInLeft fast\" id='"+mid+"'><div class=\"avatar\" style=\"float: left;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"rowl\"><div class=\"bubble you bb\"><img src=\"data:image/jpg;base64,"+content+"\"></div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function addSelfImgMsg(content,avatar,mid) {
        	$(".empty").remove();
			$(".active-chat").append("<div class=\"line animated fadeInRight fast\" id='"+mid+"' oncontextmenu=\"withDraw('"+mid+"')\"><div class=\"avatar\" style=\"float: right;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"row\"><div class=\"bubble me bb\"><img src=\"data:image/jpg;base64,"+content+"\"></div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function Clear(){
        	$(".active-chat").html("");
        }

        function Empty(){
        	$(".active-chat").html("<div class=\"empty\">消息为空</div>");
        }

        function insertTime(time){
        	$(".active-chat").append("<div class=\"conversation-start\"><span>"+time+"</span></div>");
        }
        
        function newSendFile(filename,size,id,avatar,mid){
            $(".empty").remove();
            $(".active-chat").append("<div id=\""+id+"\"><div class=\"line animated fadeInRight fast\" id='"+mid+"' oncontextmenu=\"withDraw('"+mid+"')\"><div class=\"avatar\" style=\"float: right;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"row\"><div class=\"bubble me bb\"><div style=\"display: inline;\"><div style=\"float: left;\"><img src=\"../../image/file-b-17.png\" class='fileicon'></div><div><div class='filename'>"+filename+"</div><div class='filesize'>"+(size/(1024*1024)).toFixed(2)+"Mb</div><div class='progress'><div class='progress-bar' id='"+id+"p'></div></div></div></div></div></div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function newReceiveFile(filename,size,id,avatar,mid){
            $(".empty").remove();
            $(".active-chat").append("<div id=\""+mid+"\"><div class=\"line animated fadeInLeft fast\"><div class=\"avatar\" style=\"float: left;\"><img src=\"../../avatar/avatars/"+avatar+".jpg\" class=\"avatar\"></div><div class=\"rowl\"><div class=\"bubble you bb\"><div style=\"display: inline;\"><div style=\"float: left;\"><img src=\"../../image/file-b-17.png\" class='fileicon'></div><div><div class='filename'>"+filename+"</div><div class='filesizew'>"+(size/(1024*1024)).toFixed(2)+"Mb</div><div class=\"link\" id='"+id.replace("/","")+"l'><a href=\"#\" onclick='g_context.Download(\""+id+"\",\""+filename+"\","+size+");'>下载</a></div><div class=\"link\" id='"+id.replace("/","")+"o' style=\"display:none\"><a href=\"#\" onclick='g_context.Open(\""+filename+"\");'>打开</a></div><div class='progress' style=\"display:none\" id='"+id.replace("/","")+"pb'><div class='progress-bar' id='"+id.replace("/","")+"p'></div></div></div></div></div></div></div></div>");
            var h = $(document).height();
            $(document).scrollTop(h);
        }

        function setProgress(id,sended,total){
            $("#"+id.replace("/","")+"l").hide();
            $("#"+id.replace("/","")+"pb").show();
            rate = (sended/total)*100;
            $("#"+id.replace("/","")+"p").css("width",rate+"%");
            if(sended==total){
                $("#"+id.replace("/","")+"pb").hide();
                $("#"+id.replace("/","")+"o").show();
            }
        }

    </script>




</body>

</html>